import {Row, Col, Input, Typography,Card,Button,List,Icon,DatePicker,Select,Switch  } from 'antd';
import {Field} from 'saltui';
import React from "react";
const {Text, Title} = Typography;
const { TextArea } = Input;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
{/*<div>*/}
{/*<Input placeholder="请输入"/>*/}
{/*</div>*/}
export default class RoomPrice extends React.Component {




  render() {


    const data = [
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >天数</Col>
        <Col span={12}>3Days</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>,
      <Row  gutter={4} style={{width:'100%'}}>
        <Col span={12} >每天</Col>
        <Col span={12}>50.00￥</Col>
      </Row>
    ];

    return (
      <div className="room-new-content">
        <Card title="结算"  size="small">
          <Row gutter={2} type="flex" justify="center" align="middle" >
            <Col span={5}>
              CheckTime：
            </Col>
            <Col span={15}>
              <RangePicker   placeholder="Select week" />
            </Col>
            <Col span={2} style={{textAlign:'center'}}>
              6
            </Col>
            <Col span={2}>
              Days
            </Col>

          </Row>
          <Row gutter={2}   style={{marginTop:10}} >
            <Col span={12}>
              <Card title="支付方式"  size="small">
                <Row gutter={2} justify="center" align="middle"   >
                  <Col span={12}>
                    <Select defaultValue="信用卡"  >
                      <Option value="1">信用卡</Option>
                      <Option value="2">微信</Option>
                    </Select>
                  </Col>

                  <Col span={12}>
                    <Input placeholder="请输入金额"/>
                  </Col>
                </Row>
                <Row gutter={2} style={{marginTop:10}} justify="center" align="middle"   >
                  <Col span={12}>
                    折扣：<Switch size="small" defaultChecked />
                  </Col>

                  <Col span={12}>
                    <Input placeholder="请输入金额"/>
                  </Col>
                </Row>
                <Row gutter={2} style={{marginTop:10}} justify="center" align="middle"   >
                  <Col span={12}>
                    服务费
                  </Col>

                  <Col span={12}>
                    <Input placeholder="请输入金额"/>
                  </Col>
                </Row>
              </Card>
            </Col>

            <Col span={12}>
              <Card title="计算"  size="small">
                <List
                  size="small"
                  bordered
                  dataSource={data}
                  renderItem={item => <List.Item>{item}</List.Item>}
                />
              </Card>

            </Col>

          </Row>
        </Card>
      </div>
    );
  }
}
